<script setup lang='ts'>
    import {onMounted, ref} from 'vue'
    import * as echarts from 'echarts'
    const charts = ref<any>()
        onMounted(() => {
        // 获取echarts实例
        const mycharts = echarts.init(charts.value)
       mycharts.setOption({
            // 标题
            title: {
                text: '访问量'
            },
            // x轴组件
            xAxis: {
                type: 'category',
                // 两侧不留白
                boundaryGap: false,
                // 不要分割线
                splitLine: {
                    show: false
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {
                    show: true,
                },
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                // 轴线设置
                axisLine: {
                    show: true
                },
                //刻度
                axisTick: {
                    show: true,
                },
            },
             // 布局组件
             grid: {
                left: 40,
                right: 20,
                bottom: 20,
                top: 0
            },
            // 系列
            series: [
                {
                    type: 'line',
                    data: [120, 200, 880, 99, 222, 666, 33],
                    // 平滑曲线
                    smooth: true,
                    // 区域填充样式
                    areaStyle: {
                        color: {
                            // 每一个图形的样式
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#a1c2f0' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'yellow' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                    }
                }
            ]
       })
    })
</script>


<template>
    <div class="box5">
        <div class="title">
            <Title title="未来七天游客数量趋势图"></Title>
        </div>
        <div ref="charts" class="charts"></div>
    </div>
</template>


<style scoped lang='scss'>
    .box5{
        width: 100%;
        height: 100%;
        background: url('@/views/screen/images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 20px;
        .title{
            margin-left: 20px;
        }
        .charts{
            height: calc(100% - 40px);
        }
    }
</style>